<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Chat Client</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs/lib/stomp.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; }
        #chat { width: 100%; max-width: 600px; margin: auto; }
        #messages { border: 1px solid #ccc; padding: 10px; height: 300px; overflow-y: auto; }
        .message { margin: 5px 0; }
        .sender { font-weight: bold; color: #0066cc; }
    </style>
</head>
<body>
<div id="chat">
    <h2>Chat Room</h2>
    <div>
        <input type="text" id="usernameInput" placeholder="Enter your username">
        <button onclick="login()">Login</button>
    </div>

    <div id="chatBox" style="display: none;">
        <div id="messages"></div>
        <input type="text" id="messageInput" placeholder="Type a message">
        <button onclick="sendMessage()">Send Message</button>

        <h3>Private Chat</h3>
        <input type="text" id="recipientInput" placeholder="Recipient username">
        <input type="text" id="privateMessageInput" placeholder="Type a private message">
        <button onclick="sendPrivateMessage()">Send Private Message</button>
    </div>
</div>

<script>
    let stompClient = null;
    let clientId = null;

    function login() {
        clientId = document.getElementById("usernameInput").value;
        if (clientId) {
            document.getElementById("chatBox").style.display = "block";
            connectWebSocket(clientId);
        } else {
            alert("Please enter a username");
        }
    }

    function connectWebSocket(clientId) {
        const socket = new SockJS('http://192.168.1.3:8030/ws');
        stompClient = Stomp.over(socket);

        stompClient.connect({}, function (frame) {
            console.log('Connected as ' + clientId);

            stompClient.subscribe('/topic/public', function (message) {
                showMessage(JSON.parse(message.body));
            });

            stompClient.subscribe(`/user/${clientId}/queue/private`, function (message) {
                showMessage(JSON.parse(message.body), true);
            });
        }, function (error) {
            console.error('Connection error: ', error);
        });
    }



    function sendMessage() {
        const content = document.getElementById("messageInput").value;
        if (content && stompClient) {
            const message = {
                sender: clientId,
                content: content,
                type: "CHAT"
            };
            stompClient.send("/app/chat.sendMessage", {}, JSON.stringify(message));
            document.getElementById("messageInput").value = "";
        }
    }

    function sendPrivateMessage() {
        const recipient = document.getElementById("recipientInput").value;
        const content = document.getElementById("privateMessageInput").value;
        if (recipient && content && stompClient) {
            const message = {
                sender: clientId,
                recipient: recipient,
                content: content,
                type: "PRIVATE"
            };
            stompClient.send("/app/chat.sendPrivateMessage", {}, JSON.stringify(message));
            document.getElementById("privateMessageInput").value = "";
        } else {
            alert("Please enter a recipient and a message");
        }
    }

    function showMessage(message, isPrivate = false) {
        const messageArea = document.getElementById("messages");
        const messageElement = document.createElement("div");
        messageElement.classList.add("message");

        const senderElement = document.createElement("span");
        senderElement.classList.add("sender");
        senderElement.textContent = message.sender + (isPrivate ? " (private): " : ": ");
        messageElement.appendChild(senderElement);

        const contentElement = document.createElement("span");
        contentElement.textContent = message.content;
        messageElement.appendChild(contentElement);

        messageArea.appendChild(messageElement);
        messageArea.scrollTop = messageArea.scrollHeight;
    }
</script>
</body>
</html>
